<template>
  <div>
    <MyNav></MyNav>
    <div class="container mx-auto">
      <div class="flex bg-white mt-10 pl-5 pt-2 pb-2 h-70">
        <div style="width: 40%">
          <el-image
            :src="hotData.cover"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcList"
            show-progress
            :initial-index="4"
            fit="cover"
            style="width: 100%; height: 100%" />
        </div>
        <div class="ml-5 h-full flex flex-col justify-between">
          <h3>{{ hotData.title }}</h3>
          <div>
            <span class="mr-5">￥{{ hotData.price }}</span>
            <span>会员免费</span>
          </div>
          <div>
            <button
              class="bg-[#ffa500] b-0 w-30 h-10 text-white rounded-md"
              @click="goIndent(hotData.id,hotData.price)">
              立即购买
            </button>
          </div>
        </div>
      </div>
      <div class="flex mt-10 justify-between">
        <div class="bg-white min-h-30vh w-78%">
          <div
            class="flex justify-around w-full h-12 items-center"
            style="border-bottom: 1px solid #eee">
            <div
              class="nav-item"
              :class="{ active: highlight === 'intro' }"
              @click="highlight = 'intro'">
              课程介绍
            </div>
            <div
              class="nav-item"
              :class="{ active: highlight === 'catalog' }"
              @click="highlight = 'catalog'">
              课程目录
            </div>
            <div
              class="nav-item"
              :class="{ active: highlight === 'reviews' }"
              @click="highlight = 'reviews'">
              用户评价
            </div>
          </div>
          <div v-if="highlight === 'intro'" class="p-5">
            <div class="text-xl mb-5">课程介绍</div>
            <div>
              {{ hotData.description }}
            </div>
          </div>
          <div v-if="highlight === 'catalog'" class="p-5">
            <div class="text-xl mb-5">课程目录</div>

            <ol class="ml-2rem">
              <li
                v-for="item in newData"
                :key="item.id"
                style="list-style: none">
                <div class="mb-5">
                  {{ item.title }}
                </div>
                <ol class="pl-3rem mb-5">
                  <li v-for="item in item.children" :key="item.id" class="mb-5">
                    {{ item.title }}
                  </li>
                </ol>
              </li>
            </ol>
          </div>
          <div v-if="highlight === 'reviews'" class="p-5">
            <div class="text-xl mb-5">用户评价</div>
          </div>
        </div>
        <div class="bg-white min-h-30vh% w-20%">
          <div style="border-bottom: 1px solid #eee" class="pt-2 pb-2 pl-2">
            关注微信
          </div>
          <div class="text-center mt-5">
            <el-image
              style="width: 200px; height: 200px"
              src="/imgs/course/wechat.jpg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              show-progress
              :initial-index="4"
              fit="cover" />
            <div>关注微信，接收新视频发布动态</div>
          </div>
          <div style="border-bottom: 1px solid #eee" class="pt-4 pb-2 pl-2">
            关注微信
          </div>
          <div class="flex mt-5 p-5">
            <div>
              <el-image
                src="/imgs/course/151735f53563259871.png"
                alt=""
                fit="cover"
                style="width: 100px; height: 50px" />
            </div>
            <div class="ml-5 text-sm">
              <div class="mb-1">Java线上特训营</div>
              <div>￥2999.00</div>
            </div>
          </div>
          <div class="flex mt-5 p-5">
            <div>
              <el-image
                src="/imgs/course/151735f53563259871.png"
                alt=""
                fit="cover"
                style="width: 100px; height: 50px" />
            </div>
            <div class="ml-5 text-sm">
              <div class="mb-1">Java线上特训营</div>
              <div>￥2999.00</div>
            </div>
          </div>
          <div class="flex mt-5 p-5">
            <div>
              <el-image
                src="/imgs/course/151735f53563259871.png"
                alt=""
                fit="cover"
                style="width: 100px; height: 50px" />
            </div>
            <div class="ml-5 text-sm">
              <div class="mb-1">Java线上特训营</div>
              <div>￥2999.00</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
//默认高亮
const highlight = ref("intro"); //intro|catalog|reviews
//获取数据
const route = useRoute();
const router = useRouter();
const courseId = route.query.id;
const { data: hotList } = await useFetch(
  `http://47.113.230.113:8088/course/getCourseInfo/${courseId}`
);
const { data: newList } = await useFetch(
  `http://47.113.230.113:8088/eduservice/chapter/getChapterVideo/${courseId}`
);
const hotData = hotList.value.data.courseInfoVo;
const newData = newList.value.data.allChapterVideo;
const goIndent = (id,price) => {
  router.push({
    path: "/indent",
    query: {
      id: id,
      price: price,
    },
  });
};
</script>

<style lang="scss" scoped>
.active {
  color: #ff0000;
  border-bottom: 3px solid #ff0000;
}
</style>
